import {
  AuditMaterialApi,
  fetchAuditMaterials,
} from '@/api/audit/content/material'
import { QueryMaterialRequest } from '@/api/premium/content/model/materialModel'
import { FormItemOption, FormProps } from '@/components/Form/types'
import {
  MaterialStatus,
  MaterialType,
} from '@/components/ItemList/MaterialList/types'
import { useStore } from '@/store'
import { formatPagination } from '@/utils/antdOpFormatHelper'
import { computed, reactive, ref } from 'vue'
import { MaterialTableState, QueryMaterialForm } from '../types'

export default function useSearchMateries() {
  const store = useStore()
  const materialTableState = reactive<MaterialTableState>({
    selectedRowKeys: [],
    tableData: [],
    tableSize: 'small',
    tableColumns: [
      {
        dataIndex: 'id',
        title: '素材ID',
      },
      {
        dataIndex: 'image',
        title: '预览图',
        customRender: ({ text }) => <a-image width={200} src={text} />,
      },
      {
        dataIndex: 'authorId',
        title: '作者ID',
      },
      {
        dataIndex: 'width',
        title: '宽高',
        customRender: (row) => `${row.record.width} x ${row.record.height}`,
      },
      {
        dataIndex: 'status',
        title: '审核状态',
      },
      {
        dataIndex: 'createTime',
        title: '创建时间',
      },
      {
        dataIndex: 'updateTime',
        title: '更新时间',
      },
      {
        dataIndex: 'options',
        title: '操作',
        slots: {
          customRender: 'options',
        },
      },
    ],
  })

  const pageInfo = ref({
    current: 1,
    pageSize: 8,
    total: 0,
  })

  const queryFormState = reactive<QueryMaterialForm>({
    id: undefined,
    sourceId: undefined,
    authorId: undefined,
    atlas: undefined,
    category: undefined,
    tag: undefined,
    title: undefined,
    source: undefined,
    status: MaterialStatus.CHECK_PENDING,
    type: MaterialType.IMAGE,
  })

  const queryFormBind: FormProps = {
    model: queryFormState,
  }

  const queryFormItems: FormItemOption<QueryMaterialRequest>[] = [
    {
      formProps: {
        label: '素材ID',
        name: 'id',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '输入素材ID',
        },
      },
    },
    {
      formProps: {
        label: '关键字',
        name: 'tag',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '输入素材关键字',
        },
      },
    },

    {
      formProps: {
        label: '素材来源',
        name: 'source',
      },
      inputOption: {
        tag: 'a-select',
        props: {
          placeholder: '请选择素材来源',
        },
        children: [
          {
            tag: 'a-select-option',
            content: '全部',
            props: {
              value: null,
            },
          },
          {
            tag: 'a-select-option',
            content: 'plus',
            props: {
              value: 1,
            },
          },
          {
            tag: 'a-select-option',
            content: 'dp',
            props: {
              value: 2,
            },
          },
          {
            tag: 'a-select-option',
            content: '优图',
            props: {
              value: 3,
            },
          },
          {
            tag: 'a-select-option',
            content: '开篇',
            props: {
              value: 4,
            },
          },
        ],
      },
    },
    {
      formProps: {
        label: '作者id',
        name: 'authorId',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '请输入作者id',
        },
      },
    },
    {
      formProps: {
        label: '状态',
        name: 'status',
      },
      inputOption: {
        tag: 'a-select',
        props: {
          placeholder: '请选择状态',
        },
        children: [
          {
            tag: 'a-select-option',
            content: '全部',
            props: {
              value: null,
            },
          },
          {
            tag: 'a-select-option',
            content: '正常',
            props: {
              value: 1,
            },
          },
          {
            tag: 'a-select-option',
            content: '已下架',
            props: {
              value: 2,
            },
          },
          {
            tag: 'a-select-option',
            content: '待审核',
            props: {
              value: 3,
            },
          },
          {
            tag: 'a-select-option',
            content: '驳回',
            props: {
              value: 4,
            },
          },
        ],
      },
    },
    {
      formProps: {
        label: '类型',
        name: 'type',
      },
      inputOption: {
        tag: 'a-select',
        props: {
          placeholder: '选择素材类型',
        },
        children: [
          {
            tag: 'a-select-option',
            content: '全部',
            props: {
              value: null,
            },
          },
          {
            tag: 'a-select-option',
            content: '图片',
            props: {
              value: 1,
            },
          },
          {
            tag: 'a-select-option',
            content: '视频',
            props: {
              value: 2,
            },
          },
          {
            tag: 'a-select-option',
            content: '音乐',
            props: {
              value: 3,
            },
          },
          {
            tag: 'a-select-option',
            content: '字体',
            props: {
              value: 4,
            },
          },
        ],
      },
    },
    {
      formProps: {
        label: '二级类型',
        name: 'itype',
      },
      inputOption: {
        tag: 'a-select',
        props: {
          placeholder: '请选择二级类型',
        },
        children: [
          {
            tag: 'a-select-option',
            content: '全部',
            props: {
              value: null,
            },
          },
          {
            tag: 'a-select-option',
            content: '摄影图',
            props: {
              value: 1,
            },
          },
          {
            tag: 'a-select-option',
            content: '免抠',
            props: {
              value: 2,
            },
          },
          {
            tag: 'a-select-option',
            content: '设计矢量图',
            props: {
              value: 3,
            },
          },
        ],
      },
    },
    {
      formProps: {
        label: '源ID',
        name: 'sourceId',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '请输入原始ID',
        },
      },
    },
    {
      formProps: {
        label: '标题',
        name: 'title',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '请输入标题',
        },
      },
    },
    {
      formProps: {
        label: '图集',
        name: 'atlas',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '输入图集名称',
        },
      },
    },
    {
      formProps: {
        label: '分类',
        name: 'category',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '输入分类名称',
        },
      },
    },

    {
      formProps: {
        label: '构图方式',
        name: 'structure',
      },
      inputOption: {
        tag: 'a-select',
        props: {
          placeholder: '请选择构图方式',
        },
        children: [
          {
            tag: 'a-select-option',
            content: '全部',
            props: {
              value: null,
            },
          },
          {
            tag: 'a-select-option',
            content: '未知',
            props: {
              value: 0,
            },
          },
          {
            tag: 'a-select-option',
            content: '横图',
            props: {
              value: 1,
            },
          },
          {
            tag: 'a-select-option',
            content: '竖图',
            props: {
              value: 2,
            },
          },
          {
            tag: 'a-select-option',
            content: '方图',
            props: {
              value: 3,
            },
          },
          {
            tag: 'a-select-option',
            content: '全景图',
            props: {
              value: 4,
            },
          },
        ],
      },
    },
  ]

  const searchMaterialList = async () => {
    const { data } = await fetchAuditMaterials({
      ...queryFormState,
      current: pageInfo.value.current,
      size: pageInfo.value.pageSize,
    })
    const { records, ...pageInfoData } = data
    materialTableState.tableData = records.map((record) => {
      return {
        modifyAtlasPopVisible: false,
        ...record,
      }
    })
    pageInfo.value = formatPagination(pageInfoData)
  }
  const searchMaterialLoading = computed(() =>
    store.getters['global/isOpLoading'](AuditMaterialApi.QUERY_MATERIAL)
  )

  const pageChange = (page: number) => {
    pageInfo.value.current = page
    searchMaterialList()
  }

  const pageSizeChange = (current: number, pageSize: number) => {
    pageInfo.value.current = current
    pageInfo.value.pageSize = pageSize
    searchMaterialList()
  }

  const formatTotalPageText = (total: number) => `共 ${total} 个`

  return {
    pageInfo,
    materialTableState,
    queryFormState,
    queryFormBind,
    queryFormItems,
    searchMaterialLoading,
    searchMaterialList,
    pageChange,
    pageSizeChange,
    formatTotalPageText,
  }
}
